<template>
  <div>
    <el-page-header @back="goBack"
      :content="'型号：' + indexRecord.item.deviceModel">
    </el-page-header>

    <div style="display: flex;justify-content: flex-end;">
      <el-button size="small"
        type="primary"
        style="margin-bottom:8px;"
        @click="toAdd()">
        <i class="el-icon-plus"
          style="margin-right:5px;"></i>导入/修改
      </el-button>
    </div>
    <div>
      <el-table ref="elTable"
        v-loading="loading"
        border
        fit
        size="medium"
        :data="dataList"
        :row-key="(row) => row.id"
        style="width: 100%"
        @sort-change="onSortChange"
        @selection-change="onSelectionChange">
        <el-table-column align="center"
          type="index"
          width="50"
          fixed
          label="#"
          :index="indexMethod" />
        <el-table-column align="center"
          label="标识"
          prop="identifier" />
        <el-table-column align="center"
          label="名称"
          prop="name" />
        <el-table-column align="center"
          label="主题"
          prop="topic" />
      </el-table>

      <pagination v-show="total > 0"
        :total="total"
        :page.sync="pagination.pageNum"
        :limit.sync="pagination.pageSize"
        :page-sizes="pageSizeOptions" />
    </div>


    <el-drawer :before-close="handleClose"
      :visible.sync="dialog"
      direction="rtl"
      custom-class="demo-drawer"
      ref="drawer">
      <template #title>
        <span>导入/修改代码</span>
      </template>
      <div class="drawer-content container-main"
        :style="{ 'overflow': 'auto' }">
        <el-alert title="格式化快捷键默认为F7"
          type="warning"
          show-icon
          :closable="false">
        </el-alert>
        <b-code-editor ref="editor"
          :theme="theme"
          :show-number="showNumber"
          :lint="lint"
          :auto-format="autoFormat"
          v-model="jsonStr"
          :height="`${drawerContentHeight - 20}px`" />
      </div>
      <div class="drawer-footer">

        <el-button type="primary"
          @click="onSave">保存</el-button>
        <el-button @click="dialog = false">取 消</el-button>
      </div>
    </el-drawer>

  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import dataTableMixins from '@/mixins/data-table-mixins'
import systemManageApi from '@/api/system-manage'
import JsonEditor from '@/components/JsonEditor'
export default {
  name: 'FunctionalServicesDetail',
  components: {
    Pagination,
    JsonEditor
  },
  mixins: [dataTableMixins],
  props: {
    indexRecord: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  data () {
    return {
      dialog: false,
      drawerContentHeight: this.getHeightAndWidth(),
      jsonStr: '',
      showNumber: true,
      lint: true,
      autoFormat: true,
      theme: 'dracula'

    }
  },
  created () { },
  mounted () {
    this.getDataList()
  },
  methods: {
    getHeightAndWidth () {
      let clientHeight = 0
      if (
        document.body.scrollHeight === window.screen.height &&
        document.body.scrollWidth === window.screen.width
      ) {
        clientHeight = window.screen.height - 5 // 网页可见区域高
      } else {
        clientHeight = document.body.clientHeight - 5 // 网页可见区域高
      }

      return clientHeight - 135
    },
    goBack () {
      this.$emit('goBack')
    },
    getDataList () {
      this.loading = true
      systemManageApi
        .getDeviceModelTslById({
          ...this.pagination,
          ...{
            id: this.indexRecord.item.id
          }
        })
        .then((ret) => {
          const data = ret.data.data
          this.loading = false

          this.dataList = data.metadata ? JSON.parse(data.metadata) : []
          this.jsonStr = data.metadata ? data.metadata : ''
          this.total = this.dataList.length
          // if (this.jsonStr != '') {
          //   this.$refs['editor'].formatCode()
          // }
        })
        .catch(() => {
          this.loading = false
          this.dataList = []
          this.total = 0
        })
    },
    toSearch () {
      this.pagination.pageNum = 1
      this.getDataList()
    },
    toReset () {
      this.searchModel = {}
      this.sort = {}
      this.$refs.elTable.clearSort()
      this.$refs.elTable.clearFilter()
      this.toSearch()
    },
    onSortChange (val) {
      console.log(val)
      this.sort.field = val.prop
      this.sort.order = val.order
      this.toSearch()
    },
    onSelectionChange (selection) {
      this.selectedDataList = selection
    },
    toEmptySelection () {
      this.$refs.elTable.clearSelection()
    },
    indexMethod (index) {
      return this.formatIndex(index, this.pagination)
    },
    toAdd () {
      this.dialog = true
    },
    handleClose () {
      this.dialog = false
    },
    onSave () {
      try {
        if (JSON.parse(this.jsonStr.trim())) {
          const submitModel = {
            id: this.indexRecord.item.id,
            deviceModel: this.indexRecord.item.deviceModel,
            metadata: this.jsonStr.trim()
          }
          systemManageApi.addDeviceModelTsl(submitModel).then(ret => {
            this.submitLoading = false;
            this.isVisible = false;
            this.$message({
              message: "提交成功！",
              type: "success"
            });
            this.handleClose()
            this.getDataList()
          })
        }
      } catch (e) {
        this.$message({
          message: "不是标准json",
          type: "warning",
          duration: 4000
        });
        return false;
      }
    }
  },
}
</script>
<style lang="scss"  scoped>
@import '../../../../../styles/part-custom';

/deep/.el-drawer__header {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #72767b;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 10px;
  padding: 10px 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e5e6eb;
  color: #1d2129;
  font-size: 16px;
}

/deep/.el-alert--warning.is-light {
  padding: 3px 16px;
  width: 97%;
  margin-left: 10px;
  font-size: 12px;
  margin-bottom: 5px;
  border: 1px solid #ffe58f;
}

.drawer-footer {
  padding: 10px 16px;
  text-align: right;
  border-top: 1px solid #e5e6eb;
  margin-top: 10px;
}
</style>